import { Check, ChevronDown } from "lucide-react";
import { EditorBubbleItem, useEditor } from "novel";

import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Command,
  CommandGroup,
  CommandItem,
} from "@/components/ui/command";

export interface BubbleColorMenuItem {
  name: string;
  color: string;
}

const TEXT_COLORS: BubbleColorMenuItem[] = [
  {
    name: "Default",
    color: "var(--novel-black)",
  },
  {
    name: "Purple",
    color: "#9333EA",
  },
  {
    name: "Red", 
    color: "#E00000",
  },
  {
    name: "Yellow",
    color: "#EAB308", 
  },
  {
    name: "Blue",
    color: "#2563EB",
  },
  {
    name: "Green",
    color: "#008A00",
  },
  {
    name: "Orange",
    color: "#FFA500",
  },
  {
    name: "Pink",
    color: "#BA4081",
  },
  {
    name: "Gray",
    color: "#A8A29E",
  },
];

const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
  {
    name: "Default",
    color: "var(--novel-highlight-default)",
  },
  {
    name: "Purple",
    color: "var(--novel-highlight-purple)",
  },
  {
    name: "Red",
    color: "var(--novel-highlight-red)",
  },
  {
    name: "Yellow",
    color: "var(--novel-highlight-yellow)",
  },
  {
    name: "Blue",
    color: "var(--novel-highlight-blue)",
  },
  {
    name: "Green",
    color: "var(--novel-highlight-green)",
  },
  {
    name: "Orange",
    color: "var(--novel-highlight-orange)",
  },
  {
    name: "Pink",
    color: "var(--novel-highlight-pink)",
  },
  {
    name: "Gray",
    color: "var(--novel-highlight-gray)",
  },
];

interface ColorSelectorProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
  const { editor } = useEditor();

  if (!editor) return null;
  
  const activeColorItem = TEXT_COLORS.find(({ color }) => 
    editor.isActive("textStyle", { color })
  );

  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
    editor.isActive("highlight", { color })
  );

  return (
    <Popover modal={true} open={open} onOpenChange={onOpenChange}>
      <PopoverTrigger asChild>
        <Button size="sm" variant="ghost" className="gap-2 h-8">
          <span
            className="rounded-sm px-1"
            style={{
              color: activeColorItem?.color,
              backgroundColor: activeHighlightItem?.color,
            }}
          >
            A
          </span>
          <ChevronDown className="h-4 w-4" />
        </Button>
      </PopoverTrigger>

      <PopoverContent 
        className="w-48 p-0"
        align="start"
        sideOffset={5}
      >
        <Command>
          <CommandGroup heading="Text Color">
            {TEXT_COLORS.map(({ name, color }) => (
              <CommandItem
                key={name}
                onSelect={() => {
                  editor.commands.unsetColor();
                  if (name !== "Default") {
                    editor.chain().focus().setColor(color).run();
                  }
                  onOpenChange(false);
                }}
                className="flex items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent cursor-pointer"
              >
                <div className="flex items-center gap-2">
                  <div 
                    className="rounded-sm border px-2 py-px font-medium" 
                    style={{ color }}
                  >
                    A
                  </div>
                  <span>{name}</span>
                </div>
              </CommandItem>
            ))}
          </CommandGroup>

          {/* <CommandGroup heading="Background">
            {HIGHLIGHT_COLORS.map(({ name, color }) => (
              <CommandItem
                key={name}
                onSelect={() => {
                  editor.commands.unsetHighlight();
                  if (name !== "Default") {
                    editor.chain().focus().setHighlight({ color }).run();
                  }
                  onOpenChange(false);
                }}
                className="flex items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent cursor-pointer"
              >
                <div className="flex items-center gap-2">
                  <div 
                    className="rounded-sm border px-2 py-px font-medium"
                    style={{ backgroundColor: color }}
                  >
                    A
                  </div>
                  <span>{name}</span>
                </div>
                {editor.isActive("highlight", { color }) && (
                  <Check className="h-4 w-4 ml-auto" />
                )}
              </CommandItem>
            ))}
          </CommandGroup> */}
        </Command>
      </PopoverContent>
    </Popover>
  );
};
